import React, { PropsWithChildren } from 'react';
import { connect } from 'react-redux';
import { Link, RouteComponentProps } from 'react-router-dom';
import { CombinedState } from '@/store/reducers';
import NavHeader from '@/components/NavHeader'
import { Form, Input, Button, message } from "antd";
// import actions from '@/store/actions/home';
import { ProfileState } from '@/store/reducers/profile';
import actions from '@/store/actions/profile'
import { UserAddOutlined, LockOutlined, MailOutlined } from "@ant-design/icons";
import './index.less'
type StateProps = ReturnType<typeof mapStateToProps>;
type DispatchProps = typeof actions;
interface Params { }
type Props = RouteComponentProps<Params> & StateProps & DispatchProps;

function Login(props: Props) {
    const onFinish = (value: any) => {
        console.log(value)
        props.login(value);
    }
    const onFinishFailed = (errorInfo: any) => {
        console.log(errorInfo);
        message.error("表单验证失败! ");
    }
    return (
        <>
      <NavHeader history={props.history}>用户登录</NavHeader>
      <Form
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
        className="login-form"
      >
        <Form.Item
          label="用户名"
          name="username"
          rules={[{ required: true, message: "请输入你的用户名!" }]}
        >
          <Input prefix={<UserAddOutlined />} placeholder="用户名" />
        </Form.Item>
        <Form.Item
          label="密码"
          name="password"
          rules={[{ required: true, message: "请输入你的密码!" }]}
        >
          <Input prefix={<LockOutlined />} type="password" placeholder="密码" />
        </Form.Item>
        <Form.Item>
          <Button
            type="primary"
            htmlType="submit"
            className="login-form-button"
          >
            登录
          </Button>
          或者 <Link to="/register">立刻注册!</Link>
        </Form.Item>
      </Form>
    </>
    )
}
let mapStateToProps = (state: CombinedState): ProfileState => state.home;

export default connect(
    mapStateToProps,
    actions
)(Login);